<?php $this->useJQuery() ?>

<div id="products-paging">
	<form name="paging" action="#" method="get">
		<!-- select name="sort" style="float: right;"><option>Lorem ipsum dolor</option></select -->
		<?php echo $this->paginationControl($this->paginator, 'Sliding', 'products_pagination_control.phtml'); ?>
		<span class="vspacer"></span>
		<a href="<?php echo $this->sherpaUrl()->viewBy9() ?>" class="current">View by 9 <img src="sherpa/img/paging-3x3-active.gif" alt="View by 9" width="23" height="14" /></a>
		<span class="vspacer"></span>
		<a href="<?php echo $this->sherpaUrl()->viewBy36() ?>">View by 36 <img src="sherpa/img/paging-6x6-inactive.gif" alt="View by 36" width="23" height="14" /></a>
	</form>
</div>

<div id="products-boxes">
<?php foreach($this->products AS $i=>$product): ?>
	<?php $url = $this->sherpaUrl()->productDetail($this->config('pageIdDetails'), $product->getId()) ?>
	<div class="product-box-wrapper <?php echo (($i+1)%3 == 0) ? 'last' : '' ?>">
		<div class="product-box-wide">
			<div class="name"><a href="<?php echo $url ?>"><?php echo $product->getFullProductName() ?></a></div>
			<div class="price"><span class="currency"><?php echo $this->config('currencyCode') ?></span> <?php echo $this->price($product->getPrice()) ?>
				<?php if(!$product->emptyOldPrice()): ?>
					<span class="oldprice">statt <?php echo $this->price($product->getOldPrice()) ?></span>
				<?php endif; ?>
			</div>
			<div class="image"><a href="<?php echo $url ?>"><img id="image-product-<?php echo $product->getId() ?>" src="<?php echo $this->productImagePath('m') ?><?php echo $product->getImageFile() ?>" alt="<?php echo $product->getFullProductName() ?>" width="160" height="160" /></a></div>
			<div class="colors"><?php echo $this->partial('productlist/_colors.phtml', array('product' => $product)) ?></div>
			<!-- <div class="quickview" style="position:relative;z-index:1"><a href="<?php echo $this->requestUri() ?>">Quickview</a></div> -->
		</div>
	</div>
<?php endforeach; ?>
</div>

<!--
<div id="products-quickview" style="display:none;position:absolute;width:400px;height:400px;background:#eee;border:1px solid #ccc;padding:10px;z-index:2">
	<div id="products-quickview-close"><div id="products-quickview-content"></div><a href="#">Schliessen</div>
</div>
-->

<script type="text/javascript">
    //<![CDATA[
	$(document).ready(function() {
		$(".colors a").click(function() {
			var parts = $(this).attr('id').split('-');
			// 0 -> loadimage (string)
			// 1 -> productId (integer)
			// 2 -> imageId (integer)
			// 3 -> colorApplicationId (integer)
			var url = 'sherpa/api/loadimage/';
			var vars = {
				'imageId': parts[2],
				'colorApplicationId': parts[3]
			};
			// AJAX Request
			$.getJSON(url, vars, function(json) {
				var parentProductId = json.parentProductId;
				if(parentProductId) {
					var imgIdAttr = '#image-product-' + parentProductId;
					var fileName = '<?php echo $this->productImagePath('m') ?>' + json.fileName;
					$(imgIdAttr).attr('src', fileName);
				}
			});
			return false;
		});

		/*
		$(".quickview a").click(function() {
			$("#products-quickview-content").load('/wsb/e-shop/detail.html?sherpa[catId]=1&sherpa[subcatId]=8&sherpa[id]=1');

			$('#products-quickview').css('display', 'block');

			return false;
		});
		$('#products-quickview-close a').click(function() {
			$('#products-quickview').css('display', 'none');
			return false;
		});
		*/
	});
    //]]>
</script>
